<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px" label-position="right">

      <el-form-item label="姓名" prop="workerName">
        <el-input
          v-model="queryParams.workerName"
          placeholder="请输入姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

<!--      <el-form-item label="联系电话" prop="phoneCode">-->
<!--        <el-input-->
<!--          v-model="queryParams.phoneCode"-->
<!--          placeholder="请输入联系电话"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->

      <el-form-item label="身份证" prop="idCard">
        <el-input
          v-model="queryParams.idCard"
          placeholder="请输入身份证号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="职级" prop="professionId">
        <el-select
          v-model="queryParams.professionId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in professionOptions"
            :key="dict.key"
            :label="dict.value"
            :value="dict.key"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="班组" prop="clazzId">
        <el-select
          v-model="queryParams.clazzId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in clazzOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="所在区域" prop="areaId">
        <el-select
          v-model="queryParams.areaId"
          clearable
          size="small"
          placeholder="请选择"

        >
          <el-option
            v-for="dict in areaOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="组别" prop="groupId">
        <el-select
          v-model="queryParams.groupId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in groupOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="岗位" prop="postId">
        <el-select
          v-model="queryParams.postId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in postOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="黑名单" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in hmdOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="在职状态" prop="workStatus">
        <el-select
          v-model="queryParams.workStatus"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="员工状态" prop="jobStatus">
        <el-select
          v-model="queryParams.jobStatus"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in jobStatusOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="薪资方式" prop="salaryMethod">
        <el-select
          v-model="queryParams.salaryMethod"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in salaryMethodOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>


      <el-form-item style="float: right;width: auto">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddOrUpdate"
            v-hasPermi="['job:termWorker:add']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['job:termWorker:remove']"
          >删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="multiple"
            @click="handleModify"
            v-hasPermi="['job:termWorker:modify']"
          >批量离职
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-upload2"
            size="mini"
            :loading="exportLoading"
            @click="handleImport"
            v-hasPermi="['job:termWorker:import']"
          >导入
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['job:termWorker:export']"
          >导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="updateWorkStatus"
            v-hasPermi="['job:termWorker:updateWorkStatus']"
          >加入黑名单
          </el-button>
          <el-button
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportMb"
            v-hasPermi="['job:termWorker:mb']"
          >下载模板
          </el-button>
        </el-col>

<!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="workerList" @selection-change="handleSelectionChange" stripe>
      <el-table-column type="selection" min-width="20" align="center"/>
      <el-table-column label="编号" align="center" prop="id" width="80"/>
      <el-table-column label="姓名" align="center" prop="workerName" width="80"/>
      <el-table-column label="身份证" align="center" prop="idCard"  width="170"/>
      <el-table-column label="联系电话" align="center" prop="phoneCode" width="110"/>
      <el-table-column label="班组" align="center" prop="clazzName" />
      <el-table-column label="区域" align="center" prop="areaName" />
      <el-table-column label="组别" align="center" prop="groupName" width="80"/>
      <el-table-column label="岗位" align="center" prop="postName"  width="110"/>
      <el-table-column label="职级" align="center" prop="professionInfo" />
      <el-table-column label="在职阶段" align="center" prop="workStatusName" />
      <el-table-column label="员工状态" align="center" prop="jobStatusName" />
<!--      <el-table-column label="薪资方式" align="center" prop="salaryMethodName" />-->
      <el-table-column label="黑名单" align="center" prop="statusName" width="80"/>
<!--      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" min-width="150"  >-->
      <el-table-column label="操作" align="center"  fixed="right" min-width="180"  >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAddOrUpdate(scope.row)"
            v-hasPermi="['job:termWorker:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['job:termWorker:remove']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            v-hasPermi="['job:termWorker:view']"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改【长期工】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="980px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <span style="font-weight:bold">照片信息</span>
        <el-divider></el-divider>

        <div class="block" @click="handleImg()" style="margin-left: 400px;margin-bottom: 30px">
          <span class="demonstration"  ></span>
          <el-image :src="imgSrc" style="width: 100px; height: 100px"></el-image>
        </div>

        <span style="font-weight:bold">基本信息</span>
        <el-divider></el-divider>

        <el-col :span="8">
        <el-form-item label="姓名" prop="workerName">
          <el-input v-model="form.workerName" placeholder="请输入姓名"/>
        </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入身份证号码" @change="optIdCard"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="" disabled>
            <el-option
              v-for="dict in sexOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" placeholder="" disabled/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="出生日期" prop="birthday" disabled>
            <el-input v-model="form.birthday" placeholder="" disabled/>
          </el-form-item>
        </el-col>


          <el-col :span="8">
            <el-form-item label="联系电话" prop="phoneCode">
              <el-input v-model="form.phoneCode" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>


        <el-col :span="8">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="form.nation" placeholder="请输入民族"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="education">
            <el-input v-model="form.education" placeholder="请输入学历"/>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="家庭住址" prop="homeAddress">
            <el-input v-model="form.homeAddress" placeholder="请输入家庭住址"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人" label-width="95px" prop="emergencyContact">
            <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人电话" label-width="130px" prop="emergencyContactPhone">
            <el-input v-model="form.emergencyContactPhone" placeholder="请输入紧急联系人电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招聘渠道" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入招聘渠道"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐人" prop="recommender">
            <el-input v-model="form.recommender" placeholder="请输入推荐人"/>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">
          <el-form-item label="关联用户" prop="userId">
            <el-select v-model="form.userId" placeholder="请选择">
              <el-option
                v-for="dict in userOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
<!--        <el-col :span="8">
          <el-form-item label="考勤组" prop="attendanceGroupId">

            <el-select v-model="form.attendanceGroupId" multiple placeholder="请选择">
              <el-option
                v-for="item in attendanceGroupOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>-->

        <el-col :span="8">
          <el-form-item label="入职时间" prop="comeTime">
            <el-date-picker clearable size="small"
                            v-model="form.comeTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择入职时间">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="试用期系数" prop="probationRate"  label-width="95px">
            <el-input-number clearable size="small"
                             :min="0" :max="1" :precision="2"
                             v-model="form.probationRate" :controls="false"
                             placeholder="请填入系数">
            </el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="离职时间" prop="leaveTime">
            <el-date-picker clearable size="small"
                            v-model="form.leaveTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择离职时间">
            </el-date-picker>
          </el-form-item>
        </el-col>



        <span style="font-weight:bold">岗位信息</span>

        <el-divider></el-divider>

        <el-col :span="12">
          <el-form-item label="员工状态" prop="workStatus">
            <el-select v-model="form.workStatus" placeholder="请选择">
              <el-option
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">
          <el-form-item label="职务" prop="positionId">
            <el-select
              v-model="form.positionId"
              placeholder="请选择"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in positionOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="班组" prop="clazzId">
            <el-select v-model="form.clazzId" multiple placeholder="请选择" style="width: 220px">
              <el-option
                v-for="dict in clazzOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域" prop="areaId">
            <el-select
              v-model="form.areaId"
              placeholder="请选择"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in areaOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组别" prop="groupId">
            <el-select
              v-model="form.groupId"
              placeholder="组别"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in groupOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位" prop="postId">
            <el-select
              v-model="form.postId"
              placeholder="请选择"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in postOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职级" prop="professionId">
            <el-select
              v-model="form.professionId"
              placeholder="请选择"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in professionOptions"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              />
            </el-select>
          </el-form-item>
        </el-col>

          <span style="font-weight:bold">工资卡信息</span>
          <el-divider></el-divider>
          <el-col :span="12">
            <el-form-item label="银行卡" prop="bankCardNumber">
              <el-input v-model="form.bankCardNumber" placeholder="请输入银行卡号码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行" prop="bankAddress">
              <el-input v-model="form.bankAddress" placeholder="请输入开户行"/>
            </el-form-item>
          </el-col>
        <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 【长期工】详情对话框 -->
    <el-dialog :title="title" :visible.sync="openView" width="980px" append-to-body>

      <el-form ref="formView" :model="formView"   label-width="80px" label-position="left">
        <div>
          <el-button style="margin-left:820px" @click="handleLog(formView.idCard)">入职流水</el-button>
        </div>
        <div>
          <el-button style="margin-left:820px" @click="handleModifyLog(formView.id)">修改流水</el-button>
        </div>
        <div class="block" @click="handleImg()" style="margin-left: 400px;margin-bottom: 30px">
          <span class="demonstration"  ></span>
          <el-image :src="imgSrc" style="width: 100px; height: 100px"></el-image>
        </div>
        <span style="font-weight:bold">基本信息</span>
        <el-divider></el-divider>
        <el-col :span="8">
          <el-form-item label="姓名" prop="workerName">
            <el-input v-model="formView.workerName" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证" prop="idCard">
            <el-input v-model="formView.idCard" placeholder="" disabled/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formView.age" placeholder=""  disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期" prop="birthday">
            <el-input v-model="formView.birthday" placeholder=""  disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formView.sex" placeholder=""  disabled>
              <el-option
                v-for="dict in sexOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>



        <el-col :span="8">
          <el-form-item label="联系电话" prop="phoneCode">
            <el-input v-model="formView.phoneCode" placeholder="" disabled/>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="formView.nation" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="education">
            <el-input v-model="formView.education" placeholder="" disabled/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="家庭住址" prop="homeAddress">
            <el-input v-model="formView.homeAddress" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人" label-width="95px" prop="emergencyContact">
            <el-input v-model="formView.emergencyContact" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人电话" label-width="120px" prop="emergencyContactPhone">
            <el-input v-model="formView.emergencyContactPhone" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招聘渠道" prop="companyName">
            <el-input v-model="formView.companyName" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐人" prop="recommender">
            <el-input v-model="formView.recommender" placeholder="" disabled/>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">
          <el-form-item label="关联用户" prop="userId">
            <el-select v-model="formView.userId" placeholder="" disabled>
              <el-option
                v-for="dict in userOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
<!--        <el-col :span="8">
          <el-form-item label="考勤组" prop="attendanceGroupId">
            <el-select v-model="formView.attendanceGroupId" multiple placeholder="" disabled>
              <el-option
                v-for="dict in attendanceGroupOptions"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->

        <el-col :span="8">
          <el-form-item label="入职时间" prop="comeTime">
            <el-date-picker clearable size="small"
                            v-model="formView.comeTime"
                            type="date"
                            disabled
                            value-format="yyyy-MM-dd"
                            placeholder="">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="试用期系数" prop="probationRate"  label-width="95px">
            <el-input-number clearable size="small"
                             :min="0" :max="1" :precision="2"
                             v-model="formView.probationRate" :controls="false" disabled
                             placeholder="请填入系数">
            </el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="离职时间" prop="leaveTime">
            <el-date-picker clearable size="small"
                            v-model="formView.leaveTime"
                            type="date"
                            disabled
                            value-format="yyyy-MM-dd"
                            placeholder="">
            </el-date-picker>
          </el-form-item>
        </el-col>


        <span style="font-weight:bold">岗位信息</span>

        <el-divider></el-divider>
        <el-col :span="12">
          <el-form-item label="员工状态">
            <el-select v-model="formView.workStatus" placeholder="" disabled>
              <el-option
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">
          <el-form-item label="职务" prop="positionId">
            <el-select
              v-model="formView.positionId"
              placeholder=""
              clearable
              size="small"
              style="width: 240px"
              disabled
            >
              <el-option
                v-for="dict in positionOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="班组" prop="clazzId">
            <el-select v-model="formView.clazzId" multiple placeholder="请选择" style="width: 220px">

              <el-option
                v-for="dict in clazzOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域" prop="areaId">
            <el-select
              v-model="formView.areaId"
              placeholder=""
              clearable
              size="small"
              style="width: 240px"
              disabled
            >
              <el-option
                v-for="dict in areaOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组别" prop="groupId">
            <el-select
              v-model="formView.groupId"
              placeholder=""
              clearable
              size="small"
              style="width: 220px"
              disabled
            >
              <el-option
                v-for="dict in groupOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位" prop="postId">
            <el-select
              v-model="formView.postId"
              placeholder=""
              clearable
              size="small"
              style="width: 240px"
              disabled
            >
              <el-option
                v-for="dict in postOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职级" prop="professionId">
            <el-select disabled
              v-model="formView.professionId"
              placeholder="请选择"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in professionOptions"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <span style="font-weight:bold">工资卡信息</span>
        <el-divider></el-divider>
        <el-col :span="12">
          <el-form-item label="银行卡" prop="bankCardNumber">
            <el-input v-model="formView.bankCardNumber" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行" prop="bankAddress">
            <el-input v-model="formView.bankAddress" placeholder="" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formView.remark" placeholder="" disabled/>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">

        <el-button @click="cancelView">关 闭</el-button>
      </div>
    </el-dialog>

    <!--上传组件-->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件</span>
        </div>

      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="uploadImg.title" :visible.sync="uploadImg.open" width="400px" append-to-body>
      <el-upload
        ref="uploadImg"
        :multiple="true"
        :limit="1"
        accept=".jpg,.png"
        :headers="uploadImg.headers"
        :action="uploadImg.url"
        :disabled="uploadImg.isUploading"
        :on-progress="handleImgUploadProgress"
        :on-success="handleImgSuccess"
        :on-change="beforeUpload"
        :auto-upload="false"
        :file-list="fileList"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入.jpg,.png格式文件</span>
        </div>

      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitImgForm">确 定</el-button>
        <el-button @click="uploadImg.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!--  拉黑表单  -->
    <el-dialog :title="block_worker.title" :visible.sync="block_worker.open" width="400px" append-to-body>
      <el-form ref="block_worker_data" :model="block_worker.data" label-width="80px">
        <el-form-item label="拉黑原因">
          <el-input type="textarea" v-model="block_worker.data.blockRemark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit_block_worker_data">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {listWorker,
  getWorker,
  delWorker,
  updateTermWorkerLeaveTime,
  addWorker,
  updateWorker,
  exportWorker,
  listDept,
  updateWorkStatus,listProfessionRank,
  uploadPic,listTermAttendanceGroup} from "@/api/job/termWorker/termWorker";
import { getToken } from "@/utils/auth";
import { isIdentityId,validateAge,getSex,getAge,getBirth} from "@/api/validate";

export default {
  name: "termWorker",
  data() {
    const clazzIdValid = function(rule, value, callback) {
                      if (value.length === 0) {
                             callback(new Error('班组不能为空'))
                        } else {
                           callback()
                        }
                  }

    return {
      sexOptions:[{value: 1, label: '男'}, {value: 2, label: '女'}],
      statusOptions:[{value: 1, label: '在职'}, {value: 0, label: '离职'}],
      hmdOptions:[{value: 1, label: '是'}, {value: 0, label: '否'},{value: -1, label: '请选择'}],
      jobStatusOptions:[{value: 0, label: '试岗期'},{value: 1, label: '试用期'}, {value: 2, label: '正式工'}],
      salaryMethodOptions:[{value: 0, label: '班次*单价'},{value: 1, label: '计件制'}],
      groupOptions:[],
      clazzOptions:[],
      areaOptions:[],
      postOptions:[],
      professionOptions:[],
      fileList:[],
      //是否上传了图片的标记
      uplaodImgFlag:0,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      imgSrc:'/images/upload/xtimg/zwt.png',
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "工具类导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/termWorkerApi/importTermWorker",
        rowId:""
      },
      uploadImg: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "工具类导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,

        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url:process.env.VUE_APP_BASE_API + "/ploadPictureApi/addTermWorkerImg" // 上传的图片服务器地址
      },
      // 选中数组
      ids: [],
      LeaveStatus: [],
      //拉黑项
      block_worker:{
        data:{},
        title:'拉黑表单提交',
        open:false,
      },
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【长期工】表格数据
      workerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层
      openView: false,
      // 查询字典
      queryDictParams: {
        dictType:null
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workerName: null,
        sex: null,
        idCard: null,
        age: null,
        phoneCode: null,
        bankCardNumber: null,
        bankAddress: null,
        birthday: null,
        comeTime: null,
        nation: null,
        education: null,
        status: null,
        companyName: null,
        leaveTime: null,
        homeAddress: null,
        emergencyContact: null,
        emergencyContactPhone: null,
        recommender: null,
        userId: null,
        attendanceGroupId: null,
        workStatus: null,
        positionId: null,
        clazzId: null,
        areaId: null,
        groupId: null,
        postId: null,
        professionId:null
      },
      // 表单参数
      form: {},
      // 表单参数
      formView: {},
      // 表单校验
      rules: {
        workerName: [
          {required: true, message: "姓名不能为空", trigger: "blur"},
          { min: 2, max: 20, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        clazzId:[
          {required: true, validator: clazzIdValid }
        ],
        workStatus:[
          {required: true, message: "员工状态不能为空"}
        ],
        // sex: [
        //   {required: true, message: "性别不能为空"}
        // ],

        idCard: [
          {required: true,message: "身份证不能为空",  trigger: "blur" },

        ],
        phoneCode: [
          {required: true, message: "联系方式不能为空", trigger: "blur"},
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        nation:[
          {max: 10, message: '民族长度小于10', trigger: 'blur' }
        ],
        education:[
          {max: 10, message: '学历长度小于10', trigger: 'blur' }
        ],
        homeAddress:[
          {max: 200, message: '家庭地址长度小于200', trigger: 'blur' }
        ],
        companyName:[
          {max: 200, message: '招聘渠道长度小于200', trigger: 'blur' }
        ],
        emergencyContact:[
          {max: 25, message: '紧急联系人长度小于25', trigger: 'blur' }
        ],
        emergencyContactPhone:[
          {max: 200, message: '紧急联系人电话长度小于20', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        recommender:[
          {max: 10, message: '紧急联系人长度小于10', trigger: 'blur' }
        ],
        remark:[
          {max: 500, message: '推荐人长度小于500', trigger: 'blur' }
        ],
        bankCardNumber:[
          {max: 64, message: '银行卡长度小于500', trigger: 'blur' }
        ],
        bankAddress:[
          {max: 255, message: '开户行地址长度小于255', trigger: 'blur' }
        ],
        groupId:[{required: true,message: "组别不能为空",  trigger: "blur" }],
        postId:[{required: true,message: "岗位不能为空",  trigger: "blur" }],

      }
    };
  },
  created() {
    this.listProfessionRank();
    this.getList();
    this.listDept();
    // this.listData();
    // this.listTermAttendanceGroup();
  },
  methods: {
    /** 查询【长期工】列表 */
    getList() {
      this.loading = true;
      // let clazzId = this.queryParams.clazzId;
      // if(null !=clazzId && "" !=clazzId){
      //   this.queryParams.clazzId =clazzId.join(",");
      // }
      listWorker(this.queryParams).then(response => {
        this.workerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancelView() {
      this.openView = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        workerName: null,
        sex: null,
        idCard: null,
        age: null,
        phoneCode: null,
        bankCardNumber: null,
        bankAddress: null,
        birthday: null,
        comeTime: null,
        nation: null,
        education: null,
        createTime: null,
        remark: null,
        companyName: null,
        createBy: null,
        updateBy: null,
        updateTime: null,
        leaveTime: null,
        homeAddress: null,
        emergencyContact: null,
        emergencyContactPhone: null,
        recommender: null,
        userId: null,
        attendanceGroupId: [],
        workStatus:null,
        positionId: null,
        clazzId: [],
        areaId: null,
        groupId: null,
        postId: null
      };
      this.imgSrc='';
      this.resetForm("form");

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.LeaveStatus= selection.map(item => item.workStatus);
      this.block_worker.data = selection;
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.imgSrc='/images/upload/xtimg/zwt.png';
      this.form={clazzId:[], probationRate:1.00};
      this.open = true;
      this.title = "添加【长期工】";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();

      const id = row.id || this.ids
      getWorker(id).then(response => {
        this.form = response.data;
        if( null !=response.data.clazzId && "" !=response.data.clazzId){
          let clazzIdArray =response.data.clazzId.split(",");
          let clazzIdNumberArray = new Array();
          for(var i =0;i<clazzIdArray.length;i++){
            clazzIdNumberArray.push(Number(clazzIdArray[i]));
          }
          this.form.clazzId =clazzIdNumberArray;
        }else{
          this.form.clazzId =[];
        }

        if(response.data.imgUrl==null || response.data.imgUrl==''){
          this.imgSrc='/images/upload/xtimg/zwt.png';
        }else{
          this.imgSrc=response.data.imgUrl;
        }

        if(response.data.positionId !=null && response.data.positionId !=undefined){
          this.form.positionId=response.data.positionId+"";
        }

        this.open = true;
        this.title = "修改【长期工】";
        this.$forceUpdate();
      });
    },

    /** 详情按钮操作 */
    handleView(row) {
      this.reset();
      const id = row.id || this.ids
      getWorker(id).then(response => {
        this.formView = response.data;
        if( null !=response.data.clazzId && "" !=response.data.clazzId){
          let clazzIdArray =response.data.clazzId.split(",");
          let clazzIdNumberArray = new Array();
          for(var i =0;i<clazzIdArray.length;i++){
            clazzIdNumberArray.push(Number(clazzIdArray[i]));
          }
          this.formView.clazzId =clazzIdNumberArray;
        }else{
          this.formView.clazzId =[];
        }
        if(response.data.imgUrl==null || response.data.imgUrl==''){
          this.imgSrc='/images/upload/xtimg/zwt.png';
        }else{
          this.imgSrc=response.data.imgUrl;
        }
        if(response.data.positionId !=null && response.data.positionId !=undefined){
          this.formView.positionId=response.data.positionId+"";
        }else{
          this.formView.positionId=null;
        }
        console.log("this.formView",this.formView)
        this.openView = true;
        this.title = "查看【长期工】";
        this.$forceUpdate();
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {

        if (valid) {
          let errorMsg =isIdentityId(this.form.idCard);
          if(errorMsg  !=''){
            this.$alert(errorMsg, "提示", {dangerouslyUseHTMLString: true});
            return
          }
          // if(Number(this.form.age) >50 || Number(this.form.age)<20){
          //   this.$alert("年龄要求在20-50之间，请核对", "提示", {dangerouslyUseHTMLString: true});
          //   return
          // }
          this.form.imgUrl=this.imgSrc;
          console.log("======================="+this.uplaodImgFlag);
          this.form.uplaodImgFlag=this.uplaodImgFlag;
          console.log("======================="+this.form.uplaodImgFlag)
          let clazzId = this.form.clazzId;
          this.form.clazzId =clazzId.join(",");

          if (this.form.id != null) {
            updateWorker(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWorker(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if( row.workStatus ==1){
        this.msgError("选中记录中包含了在职员工，不能删除，请核对！");
        return ;
      }
      const LeaveStatus =  this.LeaveStatus;
      for(var i=0;i<LeaveStatus.length;i++){
        if(LeaveStatus[i]==1){
          this.msgError("在职员工不能删除，请修改为离职后再删除！");
          return ;
        }
      }
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除【长期工】编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delWorker(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 批量离职按钮操作 */
    handleModify(row) {
      const ids = row.id || this.ids;
      const LeaveStatus = row.workStatus || this.LeaveStatus;
      for(var i=0;i<LeaveStatus.length;i++){
        if(LeaveStatus[i]==0){
          this.msgInfo("选中记录中包含了离职员工，请核对！");
          return ;
        }
      }
      this.$confirm('是否确认对【长期工】编号为"' + ids + '"设置离职?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateTermWorkerLeaveTime(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("设置离职成功");
      }).catch(() => {
      });
    },


    /**拉黑按钮操作 */
    updateWorkStatus(row) {
      const ids = row.id || this.ids;
      if (ids.length !== 1) {
        this.msgError("请选中对应一位员工进行拉黑操作");
        return
      }
      // let block_info = this.block_worker.data[0];
      this.block_worker.open = true;
      this.block_worker.data = this.block_worker.data[0];

    },
    //提交拉黑表单
    submit_block_worker_data(){
      let data = this.block_worker.data;
      let form = {
        workerId:data.id,
        workerName:data.workerName,
        idCard:data.idCard,
        phoneCode:data.phoneCode,
        blockRemark:data.blockRemark,
      }
      console.log(this.block_worker);
      this.$confirm('是否确认提交？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateWorkStatus(form);
      }).then(() => {
        this.block_worker.open = false;
        this.getList();
        this.msgSuccess("加入黑名单成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有【长期工】数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportWorker(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {

      if (response.code !== 200){
        console.log("长期工导入数据结果",response);
        let html = '';
        for (const str of response.data?response.data:[response.msg]) {
          html+='<p>'+str+'</p>';
        }
        this.$alert(html, "导入失败", {dangerouslyUseHTMLString: true});
      }else {
        this.msgSuccess("导入成功");
        this.getList();
      }
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入班组用工表";
      this.upload.open = true;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    listDept(){
      listDept().then(
        response => {
         this.groupOptions = response.data.group;
          this.postOptions = response.data.post;
          this.areaOptions = response.data.area;
          this.clazzOptions = response.data.clazz;

        });
    },
    /**
     * 职级数据
     */
    listProfessionRank() {
      listProfessionRank().then(
        response => {
          this.professionOptions = response.data;
        });
    },

    /*listData(){
      this.queryDictParams.dictType="post";
      listData(this.queryDictParams).then(response => {
          this.positionOptions = response.rows;
        }
      );
    },*/

    handleLog(idCard) {
      this.$router.push({path:"/basic/personnel/log",query:{idCard:idCard}});
    },

    handleModifyLog(id) {
      this.$router.push({path:"/basic/personnel/modifyLog",query:{id:id}});
    },
    handleImg() {
      this.uploadImg.title = "上传照片";
      this.uploadImg.open = true;
      this.uploadImg.url= "/ploadPictureApi/addTermWorkerImg";

    },
    // 图片上传中处理
    handleImgUploadProgress(event, file, fileList) {
      this.uploadImg.isUploading = true;

    },
    // 图片上传成功处理
    handleImgSuccess(response, file, fileList) {

      this.uploadImg.open = false;
      this.uploadImg.isUploading = false;
      this.$refs.uploadImg.clearFiles();
      this.$alert(response.msg, "上传结果", {dangerouslyUseHTMLString: true});

    },
    beforeUpload(file,fileList) {
      // 1、判断文件名是否重复，不允许上传相同文件
      let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if(existFile){
        fileList.pop()
      }


      this.fileList = fileList;
    },

    submitImgForm() {
      uploadPic(this.uploadImg.url,this.fileList).then(res => {
        this.fileList = [];
        this.uploadImg.open = false;
        this.uploadImg.isUploading = false;
        this.$refs.uploadImg.clearFiles();

        this.imgSrc = res.url;
      });
    },


    /*listTermAttendanceGroup(){
      listTermAttendanceGroup().then(response => {
        this.attendanceGroupOptions = response.rows;

      });
    },*/
    optIdCard(value){
      let errorMsg =isIdentityId(value);
      if(errorMsg  !=''){
        this.$alert(errorMsg, "提示", {dangerouslyUseHTMLString: true});
        return
      }else{
        let age = getAge(value);

        // if(Number(age) >50 || Number(age)<20){
        //   this.$alert("年龄要求在20-50之间，请核对", "提示", {dangerouslyUseHTMLString: true});
        // }
        let sex = getSex(value);
        let birth = getBirth(value);

        this.form.birthday =birth;
        this.form.age =age;
        this.form.sex =sex;
        this.$forceUpdate();
      }



    },
    /** 下载模板操作 */
    handleExportMb() {
      var fileName ="cqgmb.xlsx";
      window.location.href = process.env.VUE_APP_BASE_API + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + false;
    },

    /**
     * 添加或修改长期工数据
     * @param row 当前行数据
     */
    handleAddOrUpdate(row){
      console.log(row)
      let query ={disable:false};
      if (row.id){
        query.id = row.id;
        this.$router.push({path:"/basic/personnel/termWorkerEdit",query:query});
      }else{
        this.$router.push({path:"/basic/personnel/termWorkerAdd",query:query});
      }
      // this.$router.push({path:"/basic/personnel/termWorkerAdd",query:query});
    },

    /**
     * 处理长期工详情
     * @param row 当前行数据
     */
    handleDetail(row){
      this.$router.push({path:"/basic/personnel/termWorkerDetail",query:{id:row.id,disable:0}});
    },


  },
};
</script>
